<template>
  <a-modal
    :maskClosable="false"
    :keyboard="false"
    :title="title"
    :width="600"
    :visible="visible"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-select
      showSearch
      :showArrow="false"
      :placeholder="$t('m.system.portal.entity.searchMenu')"
      optionFilterProp="children"
      :filterOption="filterOption"
      v-model="value"
      :getPopupContainer="(node) => node.parentNode"
      :style="{width: '100%',marginBottom:'50px'}"
      @change="searchMethods"
    >
      <a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{ site.meta.title }}
      </a-select-option>
    </a-select>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
  </a-modal>

</template>

<script>

export default {
  name: "SearchMenu",
  props: {
    searchMenuOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: this.$t('m.system.portal.entity.searchMenu'),
      visible: false,
      value: undefined
    }
  },
  methods: {
    handleCancel() {
      this.value = undefined;
      this.visible = false;
    },
    searchMethods(value) {
      let route = this.searchMenuOptions.filter(item => item.id === value)[0]
      // if (route.meta.internalOrExternal === true || route.component.includes('layouts/IframePageView')) {
      //   window.open(route.meta.url, '_blank')
      // } else {
        this.$router.push({path: route.path}).catch(err => {})
      // }
      this.handleCancel();
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  }
}
</script>
